<html>
  <head>
    <title>Gmail Favicon Notifier Options</title>
	
	<script type="text/javascript">
      // Saves options to localStorage.
      function save_options() {
        var select = document.getElementById("desktopNotification");
        var desktopNotification = select.children[select.selectedIndex].value;
		if(desktopNotification == 'true' && window.webkitNotifications.checkPermission() != 0) {
		  window.webkitNotifications.requestPermission(function() {
		    if(window.webkitNotifications.checkPermission() == 0) {
		      localStorage.desktopNotification = true;
		    } else {
			  localStorage.desktopNotification = false;
			}
		  });
		} else {
		  localStorage.desktopNotification = desktopNotification == 'true' ? true : false;
		}
		
		select = document.getElementById("chatNotification");
        var chatNotification = select.children[select.selectedIndex].value;
        localStorage.chatNotification = chatNotification == 'true' ? true : false;
		
		// 0 -> Only Priority Inbox
		// 1 -> Whole Inbox
		select = document.getElementById("checkArea");
        var checkArea = select.children[select.selectedIndex].value;
		localStorage.checkArea = checkArea;

        // Update status to let user know options were saved.
        var status = document.getElementById("status");
        status.innerHTML = "Options Saved.";
        setTimeout(function() {
          status.innerHTML = "";
        }, 1000);
      }

      // Restores select box state to saved value from localStorage.
      function restore_options() {
        var desktopNotificationValue = window.webkitNotifications.checkPermission() == 0 && (localStorage.desktopNotification == "true" || !localStorage.desktopNotification);
        var select = document.getElementById("desktopNotification");
        for (var i = 0; i < select.children.length; i++) {
          var child = select.children[i];
          if (child.value == "true" && desktopNotificationValue) {
            child.selected = "true";
            break;
          }
		  if (child.value == "false" && !desktopNotificationValue) {
            child.selected = "true";
            break;
          }
        }
		
		var chatNotificationValue = localStorage.chatNotification == "true" || !localStorage.chatNotification;
        select = document.getElementById("chatNotification");
        for (var i = 0; i < select.children.length; i++) {
          var child = select.children[i];
          if (child.value == "true" && chatNotificationValue) {
            child.selected = "true";
            break;
          }
		  if (child.value == "false" && !chatNotificationValue) {
		    child.selected = "true";
			break;
		  }
        }
		
		var checkAreaValue = localStorage.checkArea ? localStorage.checkArea : "2";
        select = document.getElementById("checkArea");
        for (var i = 0; i < select.children.length; i++) {
          var child = select.children[i];
          if ( (child.value == "0" && checkAreaValue == "0") || !checkAreaValue) {
            child.selected = "true";
            break;
          }
		  if (child.value == "1" && checkAreaValue == "1") {
            child.selected = "true";
            break;
          }
        }
      }
    </script>
  </head>

  <body onload="restore_options()">
    <div style="width: 500px; margin: 100px auto; padding: 0px 20px; border: solid 1px #AAAAAA; border-radius: 20px; -webkit-box-shadow: 2px 2px 5px #BBBBBB;">
 	  <h2 style="border-bottom: solid 1px #AAAAAA; text-shadow: 1px 1px 2px #BBBBBB;"><img title="Gmail Favicon Notifier" alt="Gmail Favicon Notifier" src="icon48.png" style="vertical-align: -12px; margin-right: 10px;" />Gmail Favicon Notifier</h2>
	  <p>
        Desktop notification:
        <select id="desktopNotification">
          <option value="true">Enable</option>
          <option value="false">Disable</option>
        </select>
      </p>
	  <p>
        Enable chat notification:
        <select id="chatNotification">
          <option value="true">Enable</option>
          <option value="false">Disable</option>
        </select>
      </p>
	  <p>
	    Check for new mail in:
		<select id="checkArea">
		  <option value="0">Priority Inbox</option>
		  <option value="1">Inbox</option>
		</select>
	  </p>
	  <p>
        <button onclick="save_options()">Save</button><span id="status"></span>
	  </p>
	</div>
  </body>
</html>